<template>
  <transition name="slide">
    <div class="singer-detail">
      singer-detail
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import { getSingerDetail } from 'api/singer'
import { ERR_OK } from 'api/config'
import { createSong } from 'common/js/song'

  export default {
    name: 'SingerDetail',
    data () {
      return {
        song: []
      }
    },
    computed: {
      ...mapGetters(['singer'])
    },
    components: {},

    created() {
      this._getDetail()
    },

    methods: {
      _getDetail() {
        // 若在当前页面刷新，无法获取到值，则返回    这个值是通过点击事件触发 vuex 的 mutations 设置值
        if (!this.singer.id) {
          this.$router.push('/singer')
          return
        }
        getSingerDetail(this.singer.id).then(res=>{
          if (res.code === ERR_OK) {
            this.song = this._normalizeSong(res.data.list)
          }
        })
      },
      _normalizeSong(list) {
        let ret = []
        list.forEach(item => {
          let { musicData } = item
          if (musicData.songid && musicData.albummid) {
             ret.push(createSong(musicData))
          }
        });
        return ret
      }
    },
  }
</script>

<style lang="stylus" scoped>
  .singer-detail 
    z-index 100
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background red

  .slide-enter-active, .slide-leave-active 
    transition all 0.3s
  
  .slide-enter, .slide-leave-to 
    transform translate3d(-100%, -100%, 0)
    opacity 0
</style>
